<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>乐淘云购-首页</title>
  <meta name="description" content="乐淘是中国最大的正品运动鞋、皮鞋网上专卖。乐淘网经营的品牌包括耐克、阿迪达斯、李宁、匡威等国内外知名品牌的篮球鞋,板鞋,休闲鞋,跑步鞋,帆布...">
  <meta name="Keywords" content="乐淘 乐淘鞋城 买鞋子 上乐淘 运动鞋 篮球鞋 帆布鞋 跑步鞋 男鞋 女鞋 足球鞋 休闲鞋 凉鞋 户外鞋 布洛克 高跟鞋 单鞋 豆豆鞋 乐福鞋 牛津鞋 凉拖 皮鞋 短靴 长靴 登山鞋 徒步鞋 硫化鞋 训练鞋 溯溪鞋 越野鞋 板鞋 足球鞋 网球鞋 赛车鞋 雪地靴 马丁靴 商务 英伦">
  <!-- 初始化页面样式 -->
  <link rel="stylesheet" href="./css/reset.css">
  <!-- mui ui插件 -->
  <link rel="stylesheet" href="./res/mui/css/mui.min.css">
  <!-- 字体图标库 -->
  <link rel="stylesheet" href="./res/fontAwesome/css/font-awesome.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 首页样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
</head>

<body>
  <!-- 头部模块 -->
  <header class="lt-header mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
    <a id="search" class="fa fa-search mui-pull-right lt-header-search" href="./search/search.html"></a>
    <h1 class="mui-title lt-header-title">乐淘云购</h1>
  </header>
  <!-- 底部导航栏 -->
  <nav class="lt-footer mui-bar mui-bar-tab">
    <a href="./index.html" class="mui-item mui-active">
      <span class="fa fa-home"></span>
      <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-item" href="./sort.html">
      <span class="fa fa-bars"></span>
      <span class="mui-tab-label">分类</span>
    </a>
    <a class="mui-item " href="./cart.html">
      <span class="fa fa-shopping-cart"></span>
      <span class="mui-tab-label">购物车</span>
    </a>
    <a class="mui-item" href="./profile.html">
      <span class="fa fa-user"></span>
      <span class="mui-tab-label">个人中心</span>
    </a>
  </nav>
  <!-- 主体模块 -->
  <main class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
      <!-- 轮播图 -->
      <div id="slider" class="mui-slider">
        <div class="mui-slider-group">
          <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="./images/banner6.png">
            </a>
          </div>
          <!-- 第一张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner1.png">
            </a>
          </div>
          <!-- 第二张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner2.png">
            </a>
          </div>
          <!-- 第三张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner3.png">
            </a>
          </div>
          <!-- 第四张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner4.png">
            </a>
          </div>
          <!-- 第五张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner5.png">
            </a>
          </div>
          <!-- 第六张 -->
          <div class="mui-slider-item">
            <a href="#">
              <img src="./images/banner6.png">
            </a>
          </div>
          <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
              <img src="./images/banner1.png">
            </a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <!-- 九宫格模块 -->
      <div class="lt-nine-box">
        <a href="javascript:;">
          <img src="./images/nav1.png" alt="">
        </a>
        <a href="javascript:;">
          <img src="./images/nav2.png" alt="">
        </a>
        <a href="javascript:;">
          <img src="./images/nav3.png" alt="">
        </a>
        <a href="javascript:;">
          <img src="./images/nav4.png" alt="">
        </a>
        <a href="javascript:;">
          <img src="./images/nav5.png" alt="">
        </a>
        <a href="javascript:;">
          <img src="./images/nav6.png" alt="">
        </a>
      </div>
      <!-- 售卖区域 -->
      <div class="lt-sale">
        <ul>
          <li>
            <a href="javascript:;">
              <img src="./images/active1.png" alt="">
            </a>
            <a href="javascript:;">
              <img src="./images/active2.png" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/active3.png" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/active4.png" alt="">
            </a>
            <a href="javascript:;">
              <img src="./images/active5.png" alt="">
            </a>
          </li>
        </ul>
      </div>
      <!-- 品牌专区 -->
      <div class="lt-brand">
        <div class="lt-brand-title">
          <img src="./images/title0.png" alt="">
        </div>
        <div class="lt-brand-content">
          <a href="javascript:;">
            <img src="./images/brand1.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand2.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand3.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand4.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand5.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand6.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand7.png" alt="">
          </a>
          <a href="javascript:;">
            <img src="./images/brand8.png" alt="">
          </a>
        </div>
      </div>
      <!-- 运动生活专区 -->
      <div class="lt-sports-title">
        <img src="./images/title1.png" alt="">
      </div>
      <div class="lt-sports-content">
        <ul>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <!-- 用a 好跳转  用button更符合语义 -->
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 女士专区 -->
      <div class="lt-sports">
        <div class="lt-sports-title">
          <img src="./images/title2.png" alt="">
        </div>
        <div class="lt-sports-content">
          <ul>
            <li>
              <div class="lt-item">
                <img src="./images/product.jpg" alt="">
                <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
                <div class="price">
                  <span>&yen;560.00</span>
                  <span>&yen;888.00</span>
                </div>
                <a href="javascript:;">立即购买</a>
              </div>
            </li>
            <li>
              <div class="lt-item">
                <img src="./images/product.jpg" alt="">
                <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
                <div class="price">
                  <span>&yen;560.00</span>
                  <span>&yen;888.00</span>
                </div>
                <a href="javascript:;">立即购买</a>
              </div>
            </li>
            <li>
              <div class="lt-item">
                <img src="./images/product.jpg" alt="">
                <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
                <div class="price">
                  <span>&yen;560.00</span>
                  <span>&yen;888.00</span>
                </div>
                <a href="javascript:;">立即购买</a>
              </div>
            </li>
            <li>
              <div class="lt-item">
                <img src="./images/product.jpg" alt="">
                <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
                <div class="price">
                  <span>&yen;560.00</span>
                  <span>&yen;888.00</span>
                </div>
                <a href="javascript:;">立即购买</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 男士专区 -->
      <div class="lt-sports">
        <div class="lt-sports-title">
          <img src="./images/title3.png" alt="">
        </div>
        <div class="lt-sports-content">
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
          <li>
            <div class="lt-item">
              <img src="./images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700 </p>
              <div class="price">
                <span>&yen;560.00</span>
                <span>&yen;888.00</span>
              </div>
              <a href="javascript:;">立即购买</a>
            </div>
          </li>
        </div>
      </div>
    </div>
  </main>
  <!-- mui js文件 -->
  <script src="./res/mui/js/mui.min.js"></script>
  <script src="./res/artTemplate/template-native.js"></script>
  <script src="./res/zepto/zepto.min.js"></script>
  <!--首页js -->
  <script src="./js/index.js"></script>
</body>

</html>